import * as React from 'react';
import dayjs from 'dayjs';
import { useSearchParams, useNavigate } from 'react-router-dom';
import Header from '@/commonComponents/header/Header';
import { Link } from 'react-router-dom';
import { h0 } from '@/utils/fp';
import useNav from '@/utils/hooks/useNav';
import Nav from '@/commonComponents/nav/Nav';
import Detail from '@/commonComponents/detail/Detail';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
import { selectTicket, getTicketAsync } from './indexSlice';
import TrainContext from './context';
import Candidate from './components/candidate';

import './index.module.scss';
import { getToken } from '@/utils/localStorge';

const { memo, useState, useEffect } = React;

function Ticket() {
  const [params] = useSearchParams();
  const departStation = params.get('dStation') || '';
  const trainNumber = params.get('trainNumber') || '';
  const arriveStation = params.get('aStation') || '';
  const time = params.get('time') || '';
  const dTime = params.get('dTime') || '';
  const aTime = params.get('aTime') || '';
  // 回到上一页
  const date = params.get('date');
  const tempDepartDate = h0(dayjs(date).valueOf());
  const [departDate, setDepartDate] = useState(tempDepartDate);

  const nextDate = () => {
    setDepartDate(h0(departDate) + 86400 * 1000);
  };
  const prevDate = () => {
    setDepartDate(h0(departDate) - 86400 * 1000);
  };

  // 回上一页
  const navigate = useNavigate();
  const onBack = () => {
    navigate(-1);
  };

  const { isPrevDisabled, isNextDisabled, prev, next } = useNav(
    departDate,
    prevDate,
    nextDate
  );

  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(
      getTicketAsync({
        date: dayjs(departDate).format('YYYY-MM-DD'),
        trainNumber,
      })
    );
  }, [date, trainNumber]);

  const ticket = useAppSelector(selectTicket);
  const { detail, candidates } = ticket;
  const { departTimeStr, arriveTimeStr, arriveDate, durationStr } = detail;
  // const TrainContext = createContext({});
  return (
    <div styleName="ticket-app">
      <div styleName="header-wrapper">
        <Header title={trainNumber} onBack={onBack} />
      </div>
      <div styleName="nav-wrapper">
        <Nav
          date={departDate}
          isPrevDisabled={isPrevDisabled}
          isNextDisabled={isNextDisabled}
          prev={prev}
          next={next}
        />
      </div>
      <div styleName="detail-wrapper">
        <Detail
          departDate={departDate}
          arriveDate={arriveDate}
          departTimeStr={departTimeStr}
          arriveTimeStr={arriveTimeStr}
          trainNumber={trainNumber}
          departStation={departStation}
          arriveStation={arriveStation}
          durationStr={durationStr}
          time={time}
          dTime={dTime}
          aTime={aTime}
        >
          <span styleName="left"></span>
          <span styleName="schedule" onClick={console.log}>
            时刻表
          </span>
          <span styleName="right"></span>
        </Detail>
      </div>
      {!getToken() && (
        <div styleName="login-box" className="mgt10 mgb10">
          <span className="mgr10">你还没有登录,请</span>
          <Link to="/login">登录</Link>
        </div>
      )}
      <TrainContext.Provider
        value={{
          trainNumber,
          departStation,
          arriveStation,
          departDate,
          time,
          dTime,
          aTime,
        }}
      >
        <Candidate tickets={candidates} />
      </TrainContext.Provider>
    </div>
  );
}
export default memo(Ticket);
